<template>
	<view class="perfectBox">
		<view class="perfectBox-title">
			<view class="topText">完善信息</view>
			<view class="topText">审核通过成功入住</view>
			<view class="topTitle">"填写正确的信息有助于快速通过审核"</view>
		</view>
		<view class="perfectFrom">
			<div class="inpBox">

				<h3>您的真实姓名:</h3>
				<div class="drop-down">
					<uv-input placeholder="请输入内容" border="surround" v-model="valu" @change="change"></uv-input>
				</div>
			</div>
			<div class="inpBox">

				<h3>您所在的医院:</h3>
				<div class="drop-down">
					<uv-input placeholder="请输入内容" border="surround" v-model="value" @change="change"></uv-input>
				</div>
			</div>
			<div class="inpBox">
				<h3>您所在的科室:</h3>
				<div class="drop-down" @click="openPickers">
					<uv-input suffixIcon="arrow-down" placeholder="请输入内容" v-model="val" @change="change"></uv-input>
					<uv-picker ref="pickers" :columns="columnsdata" @confirm="confirmdata"></uv-picker>
				</div>

			</div>
			<div class="inpBox">
				<h3>您的职称:</h3>
				<div class="drop-down" @click="openPicker">
					<uv-input suffixIcon="arrow-down" placeholder="请输入内容" v-model="values" @change="change"></uv-input>
					<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
				</div>
			</div>
			<button class="btnStyle" @click="goTonext">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				columns: [
					['护士', '主治医生', '实习医生']
				],
				columnsdata: [
					['外科', '内科', '骨科']
				],
				valu: '',
				value: '',
				values: "",
				val: ""
			}
		},
		methods: {
			openPicker() {
				this.$refs.picker.open();
			},
			openPickers() {
				this.$refs.pickers.open();
			},
			confirm(e) {
				console.log('confirm', e);
				this.values = e.value
			},
			confirmdata(e) {
				console.log('confirm', e);
				this.val = e.value
			},
			goTonext() {
				if (this.value == '' || this.val == "" || this.values == "" || this.valu == "") {
					uni.showModal({
						title: "请填写完整信息,才能进入下一步"
					})
				} else {
					uni.navigateTo({
						url: "/pages/PerfectTwo/PerfectTwo"
					})
				}
			}
		}
	}
</script>

<style>
	.btnStyle {
		background: #4191ec;
		color: aliceblue;
		border-radius: 30rpx;
	}

	.inpBox {
		margin-top: 75rpx;
		margin-bottom: 80rpx;
	}

	.drop-down {
		margin-top: 30rpx;
	}

	.perfectBox {
		width: 675rpx;
		padding: 40rpx 35rpx;
	}

	.topText {
		font-weight: 600;
		font-size: 45rpx;
		color: #4191ec;
		margin-bottom: 20rpx;
	}

	.topTitle {
		font-weight: 600;
		font-size: 22rpx;
		color: #e98072;
		margin-bottom: 30rpx;
	}
</style>